<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body></body>
    <script type="module">
        import Matter from "https://cdn.skypack.dev/matter-js";
        const {
            Engine,
            Render,
            World,
            Bodies,
            Events,
            Mouse,
            MouseConstraint,
            Body,
            Vector,
        } = Matter;

        var engine = Engine.create(),
            world = engine.world;
        var render = Render.create({
            engine: engine,
            element: document.body,
        });
        Engine.run(engine);
        Render.run(render);

        const target = Bodies.circle(100, 100, 20, { isStatic: true });
        World.add(world, target);

        const balls = [...Array(200).keys()].map((i) => {
            const ball = Bodies.circle(100, 100, 10);
            return ball;
        });
        World.add(world, balls);

        var mouse = Mouse.create(render.canvas);

        //创建鼠标约束
        const mouseConstraint = MouseConstraint.create(engine, {
            mouse: mouse,
            constraint: {
                stiffness: 0.2,
                render: {
                    visible: false,
                },
            },
        });

        //监听全局鼠标拖拽事件
        Events.on(mouseConstraint, "mousemove", function (event) {
            Body.setPosition(target, event.mouse.position);
        });
        import { Tracking } from "../dist/index.js";
        const controllers = balls.map((i) => {
            // ! 主要代码
            return new Tracking({
                target,
                tracker: i,
                getPosition(info) {
                    return info.position;
                },

                ctrConfig: {},
                space: 150,
            });
        });
        setInterval(() => {
            balls.forEach((ball, index) => {
                const { x, y } = controllers[index].update();

                Body.setVelocity(ball, Vector.create(x, y));
            });
        }, 100);
        world.gravity.y = 0;
    </script>
</html>
